<template>
  <div class="box">
    <el-form ref="search" :model="searchForm" :inline="true" label-width="80px">
      <el-form-item label="目录名称" prop="directoryName">
        <el-input v-model="searchForm.directoryName"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-select v-model="searchForm.state" placeholder="请选择">
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">清除</el-button>
        <el-button type="primary" @click="onSearch">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" icon="el-icon-edit" @click="add"
          >新增目录</el-button
        >
      </el-form-item>
    </el-form>
    <SubjectTable
      :params="params"
      :list="list"
      :counts="counts"
      @changeSize="changePages"
      @changePage="changePage"
      @updateState="updateState"
      @updateData="updateData"
      @deleteData="deleteData"
    ></SubjectTable>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      @closed="handleClosed"
    >
      <el-form ref="addForm" label-width="80px" :model="addForm" :rules="rules">
        <el-form-item label="所属学科" prop="subjectID">
          <el-select v-model="addForm.subjectID" style="width: 100%">
            <el-option
              v-for="item in subjectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input
            placeholder="请输入目录名称"
            v-model="addForm.directoryName"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SubjectTable from '@/module-hmmm/components/subject-table.vue'
import { list, add, update, remove } from '@/api/hmmm/directorys'
import { status } from '@/api/hmmm/constants'
import { simple } from '@/api/hmmm/subjects'
export default {
  components: {
    SubjectTable
  },
  created () {
    this.getList()
  },
  data () {
    return {
      params: {
        page: 1,
        pagesize: 10,
        state: null,
        directoryName: ''
      },
      list: [],
      counts: null,
      status,
      searchForm: {
        state: '',
        directoryName: ''
      },
      dialogVisible: false,
      subjectList: [],
      addForm: {
        id: '',
        subjectID: '',
        directoryName: ''
      },
      title: '',
      rules: {
        directoryName: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    reset () {
      this.$refs.search.resetFields()
      this.params.state = null
      this.params.directoryName = ''
    },
    async onSearch () {
      if (this.searchForm.state === '' && this.searchForm.directoryName === '') {
        console.log(1)
      } else {
        this.params.state = this.searchForm.state
        this.params.directoryName = this.searchForm.directoryName
      }
      this.getList()
    },
    async getList () {
      const { data } = await list(this.params)
      // console.log(data)
      this.list = data.items
      this.counts = data.counts
    },
    changePages (pages) {
      this.params.pagesize = pages
      this.getList()
    },
    changePage (page) {
      this.params.page = page
      this.getList()
    },
    handleClose () {
      this.$refs.addForm.resetFields()
      this.dialogVisible = false
    },
    handleClosed () {
      this.$refs.addForm.resetFields()
    },
    async add () {
      this.title = '新增目录'
      this.dialogVisible = true
      const { data } = await simple()
      // console.log(data)
      this.subjectList = data
    },
    async sureBtn () {
      try {
        if (this.title === '新增目录') {
          await this.$refs.addForm.validate()
          this.dialogVisible = false
          await add(this.addForm)
          this.getList()
          this.$message.success('添加成功')
        } else {
          this.dialogVisible = false
          await update(this.addForm)
          this.$message.success('修改成功')
          this.getList()
        }
      } catch (error) {
        console.log(error)
      }
    },
    updateState (id) {
      const newList = this.list.find(item => item.id === id)
      newList.state = !newList.state
    },
    async updateData (val) {
      this.title = '修改目录'
      const { data } = await simple()
      // console.log(data)
      this.subjectList = data
      this.dialogVisible = true
      this.addForm.id = val.id
      this.addForm.subjectID = val.subjectID
      this.addForm.directoryName = val.directoryName
    },
    async  deleteData (val) {
      await remove(val)
      this.$message.success('删除成功')
      this.getList()
    }
  }
}
</script>

<style scoped lang='scss'>
.box {
  margin: 20px;
  background-color: #fff;
}
.el-form {
  width: 100%;
  padding-top: 17px;
  position: relative;
}
// ::v-deep .el-button.el-button--success.el-button--medium {
//   position: absolute;
//   right: 10px;
// }
</style>
